<template>
  <div class="big_cont">
    <div class="app-container" style="width: 100%">
      <div class="titbox">
        <div style="color: #666666; font-size: 26px">欢迎回来,{{ adminname }}</div>
        <div class="itemflex_b">
          <div class="ib1">
            <el-dropdown @command="getshopInfo" trigger="click">
              <el-button>
                {{ storename }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in options" :key="item.id" :command="item">{{
                  item.store_name
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- <div class="ib1">
            <el-button> 筛选 </el-button>
          </div> -->
          <div class="ib1">
            <el-button @click="setopenpop"> 时间范围筛选 </el-button>
          </div>
          <div>
            <el-button @click="exportsd"> 导出 </el-button>
          </div>
        </div>
      </div>
      <div class="navbox_tit" style="padding: 20px 10px">
        <div class="flexcontas">
          <img src="../../assets/img/ys_today.png" style="width: 72px; height: 72px; margin-right: 14px" alt="" />
          <div style="
              height: 72px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            ">
            <div class="toptext">今日营业收入</div>
            <div>
              <span style="
                  color: #101010;
                  font-size: 30px;
                  font-weight: 400;
                  margin-right: 46px;
                ">{{ dayPrice }}</span>
              <span style="color: #999999; font-size: 16px">元</span>
            </div>
          </div>
        </div>
        <div class="lineds"></div>
        <div class="flexcontas">
          <img src="../../assets/img/order.png" style="width: 72px; height: 72px; margin-right: 14px" alt="" />
          <div style="
              height: 72px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            ">
            <div class="toptext">今日订单数</div>
            <div>
              <span style="
                  color: #101010;
                  font-size: 30px;
                  font-weight: 400;
                  margin-right: 46px;
                ">{{ dayCountOrder }}</span>
              <span style="color: #999999; font-size: 16px">个</span>
            </div>
          </div>
        </div>
        <div class="lineds"></div>
        <div class="flexcontas">
          <img src="../../assets/img/set.png" style="width: 72px; height: 72px; margin-right: 14px" alt="" />
          <div style="
              height: 72px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            ">
            <div class="toptext">今日上座率</div>
            <div>
              <span style="
                  color: #101010;
                  font-size: 30px;
                  font-weight: 400;
                  margin-right: 46px;
                ">{{ occRate }}</span>
              <span style="color: #999999; font-size: 16px"></span>
            </div>
          </div>
        </div>
        <div class="lineds"></div>
        <div class="flexcontas">
          <img src="../../assets/img/ys_mont.png" style="width: 72px; height: 72px; margin-right: 14px" alt="" />
          <div style="
              height: 72px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            ">
            <div class="toptext">本月营业收入</div>
            <div>
              <span style="
                  color: #101010;
                  font-size: 30px;
                  font-weight: 400;
                  margin-right: 46px;
                ">{{ averagePrice }}</span>
              <span style="color: #999999; font-size: 16px">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="navbox">
        <div class="echats_leftcont">
          <div class="lefttitbox">
            <div style="margin-top: 26px; margin-left: 26px">销售概况</div>
          </div>
          <div id="myCharts" ref="charts" style="width: 100%; height: 400px" />
        </div>
      </div>
      <div class="navbox">
        <div class="echats_leftcont">
          <div class="lefttitbox">
            <div style="margin-top: 26px; margin-left: 26px">收入分析</div>
          </div>
          <div>
            <el-table :data="tableData" show-summary style="width: 100%">
              <el-table-column prop="type" align="center" label="" width="150">
              </el-table-column>
              <el-table-column label="自习室" align="center">
                <el-table-column prop="wxpay" label="微信支付" align="center">
                </el-table-column>
                <el-table-column prop="dzpay" label="大众点评" align="center">
                </el-table-column>
                <el-table-column prop="wechatnum" label="小程序套餐" align="center">
                </el-table-column>
              </el-table-column>
              <el-table-column label="会议室" align="center">
                <el-table-column prop="wxpays" label="微信支付" align="center">
                </el-table-column>
                <!-- <el-table-column prop="dzpay" label="大众点评" align="center">
                  </el-table-column> -->
                <el-table-column prop="dzmt" label="大众美团" align="center">
                </el-table-column>
              </el-table-column>
            </el-table>
            <!-- <tableXY :column="column" :table-data="tableData" @handClick="handClick" /> -->
          </div>
        </div>
      </div>
      <div class="mainbox" style="display: flex; justify-content: space-between; background: none">
        <div class="echats_rightcont">
          <div class="lefttitboxs">
            <el-form ref="form1" :model="form1" status-icon :rules="rules" style="margin-top: 10px; margin-left: 26px">
              <el-form-item label="收入来源占比" prop="value1" style="margin-bottom: 14px">
              </el-form-item>
            </el-form>
          </div>
          <div class="botnavbox">
            <div class="cenbox" v-for="(item, index) in carddata" :key="index">
              <div style="
                  display: flex;
                  margin-top: 20px;
                  margin-bottom: 20px;
                  width: 98%;
                  margin-left: 10px;
                  align-items: center;
                ">
                <div style="color: #131313; font-size: 12px; width: 80px">
                  {{ item.title }}
                </div>
                <el-progress :percentage="item.num >= 100 ? 100 : item.num"
                  style="width: 250px; margin-left: 70px"></el-progress>
                <div class="text1">{{ item.num }}份</div>
                <div class="text2">¥{{ item.money }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="echats_rightcont">
          <div class="lefttitboxs">
            <el-form ref="form2" :model="form2" :rules="rulesd" style="margin-top: 10px; margin-left: 26px">
              <el-form-item label="订单销量" prop="value1" style="margin-bottom: 14px">
              </el-form-item>
            </el-form>
          </div>
          <div id="mypieCharts" ref="charts" style="width: 100%; height: 400px; margin-top: 20px" />
        </div>
      </div>
      <div class="mainbox">
        <div class="echats_leftconts">
          <div class="tit_zhecont">
            <div class="wi_box">
              <div class="lit_box">
                <div class="toptext">今日新增用户</div>
                <div style="
                    color: #101010;
                    font-size: 30px;
                    font-weight: 400;
                    margin-top: 24px;
                  ">
                  {{ todayCount }}
                </div>
              </div>
            </div>
            <div class="lines"></div>
            <div class="wi_box">
              <div class="lit_box">
                <div class="toptext">日活</div>
                <div style="
                    color: #101010;
                    font-size: 30px;
                    font-weight: 400;
                    margin-top: 24px;
                  ">
                  {{ dayUser }}
                </div>
              </div>
            </div>
            <div class="lines"></div>
            <div class="wi_box">
              <div class="lit_box">
                <div class="toptext">月活</div>
                <div style="
                    color: #101010;
                    font-size: 30px;
                    font-weight: 400;
                    margin-top: 24px;
                  ">
                  {{ monthCount }}
                </div>
              </div>
            </div>
            <div class="lines"></div>
            <div class="wi_box">
              <div class="lit_box">
                <div class="toptext">累计用户数</div>
                <div style="
                    color: #101010;
                    font-size: 30px;
                    font-weight: 400;
                    margin-top: 24px;
                  ">
                  {{ userCount }}
                </div>
              </div>
            </div>
            <div class="lines"></div>
            <div class="wi_box">
              <div class="lit_box">
                <div class="toptext">30天留存率</div>
                <div style="
                    color: #101010;
                    font-size: 30px;
                    font-weight: 400;
                    margin-top: 24px;
                  ">
                  {{ retained }}
                </div>
              </div>
            </div>
          </div>
          <div class="lefttitbox">
            <div style="margin-top: 26px; margin-left: 26px">日活 (近30天)</div>
          </div>
          <div id="myChart" ref="charts" style="width: 100%; height: 400px" />
        </div>
      </div>
    </div>
    <!-- <div class="rightconts">
      <div class="floatrightbox">
        <div class="bianti">
          <div style="color:#101010;font-size:22px;">快捷入口</div>
          <el-button type="text">管理</el-button>
        </div>
        <div class="flex_boxs">
          <div class="flexdi">
            <img src="../../assets/img/contment.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">内容管理</div>
          </div>
          <div class="flexdi">
            <img src="../../assets/img/conttj.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">内容统计</div>
          </div>
          <div class="flexdi">
            <img src="../../assets/img/mentgj.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">高级管理</div>
          </div>
          <div class="flexdi">
            <img src="../../assets/img/online.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">线上推广</div>
          </div>
          <div class="flexdi">
            <img src="../../assets/img/conttf.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">内容投放</div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="bianti">
          <div style="color:#101010;font-size:22px;">最近访问</div>
          <div></div>
        </div>
        <div class="flex_boxs">
          <div class="flexdi">
            <img src="../../assets/img/contment.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">内容管理</div>
          </div>
          <div class="flexdi">
            <img src="../../assets/img/conttj.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">内容统计</div>
          </div>
          <div class="flexdi">
            <img src="../../assets/img/mentgj.png" style="width:42px;height:42px;margin-bottom:10px;" alt="">
            <div class="divtext">高级管理</div>
          </div>
        </div>
      </div>
      <div class="floatrightboxs">
        <div class="imgbox">
          <img :src="src" style="width:100%;height: 248px;" />
        </div>
        <div class="padding3">
          <div class="bianti marbot2">
            <div style="color:#101010;font-size:22px;">公告</div>
            <el-button type="text">查看更多</el-button>
          </div>
          <div class="itemflex_b marbot">
            <el-button style="margin-right:12px;" type="warning" plain size="mini">活动</el-button>
            <div class="white-spacetext">莲花北店最新优惠活动上线</div>
          </div>
          <div class="itemflex_b marbot">
            <el-button style="margin-right:12px;" type="primary" plain size="mini">通知</el-button>
            <div class="white-spacetext">2022年自习室年终宗总结汇报及表彰会总结汇报及表彰会总结汇报及表彰会</div>
          </div>
          <div class="itemflex_b marbot">
            <el-button style="margin-right:12px;" type="success" plain size="mini">消息</el-button>
            <div class="white-spacetext">牡蛎自习室分店即将开业，敬请期待</div>
          </div>
          <div class="itemflex_b marbot">
            <el-button style="margin-right:12px;" type="primary" plain size="mini">通知</el-button>
            <div class="white-spacetext">2022年自习室年终宗总结汇报及表彰会总结汇报及表彰会总结汇报及表彰会总结汇报及表彰会总结汇报及表彰会</div>
          </div>
          <div class="itemflex_b marbot">
            <el-button style="margin-right:12px;" type="success" plain size="mini">消息</el-button>
            <div class="white-spacetext">牡蛎自习室分店即将开业，敬请期待</div>
          </div>
        </div>
      </div>
      <div class="floatrightbox">
        <div class="bianti marbot2">
          <div style="color:#101010;font-size:22px;">帮助文档</div>
          <el-button type="text">查看更多</el-button>
        </div>
        <div class="link_text">
          <div class="itemlink">
            <el-link :underline="false" href="https://element.eleme.io" target="_blank">产品概述</el-link>
          </div>
          <div class="itemlink">
            <el-link :underline="false" href="https://element.eleme.io" target="_blank">使用指南</el-link>
          </div>
          <div class="itemlink">
            <el-link :underline="false" href="https://element.eleme.io" target="_blank">接入流程</el-link>
          </div>
          <div class="itemlink">
            <el-link :underline="false" href="https://element.eleme.io" target="_blank">接口文档</el-link>
          </div>
        </div>
      </div>
    </div> -->
    <el-dialog title="时间筛选" @close="handleClose" :visible.sync="hiddenpopbox" width="50%">
      <el-form ref="timedata" :model="timedata">
        <el-form-item label="开始时间" prop="start" label-width="200px">
          <el-date-picker v-model="timedata.start" value-format="timestamp" type="datetime"
            placeholder="选择开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end" label-width="200px">
          <el-date-picker v-model="timedata.end" value-format="timestamp" type="datetime"
            placeholder="选择结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button @click="hiddenpopbox = fasle">取消</el-button>
          <el-button type="primary" @click="submitFormtimedata()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
// import tableXY from "../../components/tabble.vue"
import {
  overview,
  income,
  business,
  cardsell,
  revenue,
  card,
} from "@/api/table";
import { adminStore } from "@/api/menu";
import Base64 from "@/utils/base";

const echarts = require("echarts");

export default {
  // components: { tableXY },
  data() {
    var chechDate = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(" "));
      }
    };
    var chechDates = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(" "));
      }
    };
    return {
      adminname:"",
      hiddenpopbox: false,
      // src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      dayPrice: 0, //今日营收
      timedata: {
        start: "",
        end: "",
      },
      column: [
        {
          title: "", // 第一个单元格展示的 title
          colorBJ: "#fff",
          value: "nameX", //   第一个对象固定 横轴 标题
        },
        {
          title: "订单数", // 必传  左侧标题
          value: "aaaa", // 必传   左侧标题  对应的value
          // colorText: "#ffffff", // 非必传  左侧标题当前单元格  字体颜色
          // colorBJ: "", // 非必传  左侧标题当前单元格 背景颜色、
          // slot: [
          //   // 自定义必须传数组 暂时只支持 button   非必传
          //   {
          //     type: "button", // 自定义模板类型
          //     showType: "", // 按钮显示类型  以element  按钮类型 为准
          //     clickName: "复制", // 按钮展示汉字
          //     clickMethods: "copyMethods", // 按钮回调 方法名
          //   },
          // ],
        },
        {
          title: "收入",
          // colorBJ: "",
          value: "cccc",
        },

        {
          title: "汇总",
          value: "eeee",
        },
        // {
        //   title: "进度",
        //   value: "progress",
        // },
        // {
        //   title: "操作", // 操作列  单写  按以下格式  暂时只支持button
        //   value: "action", // 必传
        //   action: [
        //     {
        //       type: "button",
        //       showType: "",
        //       clickName: "删除",
        //       clickMethods: "delMethods",
        //     },
        //   ],
        // },
      ],
      tableData: [
        {
          type: '订单数',
          wxpay: 0,
          dzpay: 0,
          wechatnum: 0,
          wxpays: 0,
          dzmt: 0
        }, {
          type: '收入',
          wxpay: 0,
          dzpay: 0,
          wechatnum: 0,
          wxpays: 0,
          dzmt: 0
        }
      ],
      // tableData: [
      //   {
      //     wxOrderPrice :"",
      //     hysOrderPirce :""
      //   }
      // ],
      rules: {
        value1: [
          {
            validator: chechDate,
            trigger: "blur",
          },
        ],
      },
      rulesd: {
        value1: [
          {
            validator: chechDates,
            trigger: "blur",
          },
        ],
      },
      form: {
        value1: "",
      },
      form1: {
        value1: "",
      },
      form2: {
        value1: "",
      },
      options: "",
      storename: "",
      zhexiandatax: "",
      zhexiandata: "",
      zmoney: "",
      zmoneys: "",
      value: "",
      carddata: "",
      cardlist: "",
      dayCountOrder: "", //今日座位订单
      occRate: "", //今日上座率
      averagePrice: "", //本月营收
      todayCount: "", //今日新增用户量
      dayUser: "", //日活
      monthCount: "", //月活
      userCount: "", //用户量
      retained: "", //留存率
      store_id: "",
    };
  },
  // name: 'Dashboard',
  computed: {
    // ...mapGetters([
    //   'name'
    // ])
  },
  mounted() {
    setTimeout(() => {
      this.adminname = localStorage.getItem("adminname")
      this.options = JSON.parse(localStorage.getItem("storemenus"));
      this.storename = JSON.parse(
        localStorage.getItem("storemenus")
      )[0].store_name;
      if (
        JSON.parse(localStorage.getItem("storemenu")).length == 1 &&
        JSON.parse(localStorage.getItem("storemenu"))[0].store_name !=
        "选择门店" &&
        JSON.parse(localStorage.getItem("storemenu"))[0].store_name != ""
      ) {
        this.value = JSON.parse(localStorage.getItem("storemenu"))[0].id;
        this.options = JSON.parse(localStorage.getItem("storemenu"));
      }
      this.form.value1 = this.getNowTime();
      // this.form1.value1 = this.getNowTime();
      // this.form2.value1 = this.getNowTime();
      this.getdata(JSON.parse(localStorage.getItem("storemenus"))[0].id);
      this.getincome(
        JSON.parse(localStorage.getItem("storemenus"))[0].id,
        this.timedata.start,
        this.timedata.end
      );
      // this.getbusiness(0);
      // this.getcardsell(0);
      // this.getrevenue(0)
      // this.getcard(0)
    }, 500);
  },
  methods: {
    setopenpop() {
      this.hiddenpopbox = true;
    },
    //导出
    exportsd() {
      // this.$message({
      //   message: "导出",
      //   type: "warning",
      // });
      window.open()
    },
    handleClose() {
      this.timedata.start = "";
      this.timedata.end = "";
    },
    submitFormtimedata() {
      this.hiddenpopbox = false;
      this.getincome(
        this.store_id || JSON.parse(localStorage.getItem("storemenus"))[0].id,
        this.timedata.start,
        this.timedata.end
      );
    },
    handClick(methods, row) {
      console.log(methods, row);
    },
    getincome(val, time1, time2) {
      income({
        request_data: Base64.encode(
          JSON.stringify({
            store_id: val,
            start_time: time1 / 1000 || "",
            end_time: time2 / 1000 || "",
          })
        ),
      }).then((res) => {
        if (res.status != 1) {
          this.$message({
            message: res.message,
            type: "warning",
          });
          return;
        }
        this.dayPrice = res.result.dayPrice;
        this.tableData[0].wxpay = res.result.xOrderCount[0]
        this.tableData[0].dzpay = res.result.xOrderCount[1]
        this.tableData[0].wechatnum = res.result.xOrderCount[2]
        this.tableData[0].wxpays = res.result.xOrderCount[3]
        this.tableData[0].dzmt = res.result.xOrderCount[4]

        this.tableData[1].wxpay = res.result.xOrderPrice[0]
        this.tableData[1].dzpay = res.result.xOrderPrice[1]
        this.tableData[1].wechatnum = res.result.xOrderPrice[2]
        this.tableData[1].wxpays = res.result.xOrderPrice[3]
        this.tableData[1].dzmt = res.result.xOrderPrice[4]
        this.tableData[0].wxOrderPrice = res.result.wxOrderPrice;
        this.tableData[0].hysOrderPirce = res.result.hysOrderPirce;
        this.dayCountOrder = res.result.dayCountOrder;
        this.occRate = res.result.occRate;
        this.averagePrice = res.result.averagePrice;
        // this.carddata = res.result.two;
        // this.getpieEcharts(res.result.four.list);
        this.todayCount = res.result.todayCount;
        this.dayUser = res.result.dayUser;
        this.monthCount = res.result.monthCount;
        this.userCount = res.result.userCount;
        this.retained = res.result.retained;
        this.getEcharts(res.result.xUser, res.result.yUser);
        this.getEcharts1(
          res.result.svOrderCount,
          res.result.vs,
          res.result.vsMoney,
          res.result.svOrderDate
        );
      });
    },
    getNowTime() {
      const start = new Date(
        new Date().getTime() + 8 * 3600 * 1000 - 3600 * 1000 * 24 * 7
      )
        .toISOString()
        .replace("T", " ")
        .split(".")[0]; //默认开始时间7天前
      const end = new Date(new Date().getTime() + 8 * 3600 * 1000)
        .toISOString()
        .replace("T", " ")
        .split(".")[0]; //默认结束时间今天
      return [start, end];
    },
    changeform(e) {
      this.form1.value1 = e;
    },
    changeforms(e) {
      this.form2.value1 = e;
    },
    getadminStore() {
      adminStore({
        request_data: Base64.encode(JSON.stringify({ store_id: "" })),
      }).then((res) => {
        if (res.status == 2) {
          this.$message({
            message: res.message,
            type: "warning",
          });
          return;
        }
        this.options = res.data;
      });
    },
    //折线图
    // getbusiness(val) {
    //   let that = this;
    //   let parmes = {
    //     store_id: val
    //   };
    //   business({
    //     request_data: Base64.encode(JSON.stringify(parmes))
    //   }).then(res => {
    //     that.zhexiandata = res.data.data;
    //     that.zhexiandatax = res.data.date;
    //     that.zmoney = res.data.money;
    //     that.getEcharts(res.data.data, res.data.date);
    //   });
    // },
    //储值卡
    // getcardsell(val) {
    //   let parmes = {
    //     store_id: val,
    //     start_time: this.form1.value1[0],
    //     end_time: this.form1.value1[1]
    //   };
    //   cardsell({
    //     request_data: Base64.encode(JSON.stringify(parmes))
    //   }).then(res => {
    //     this.carddata = res.data;
    //   });
    // },
    //柱状图
    // getrevenue(val){
    //   let that = this;
    //   let parmes = {
    //     store_id: val
    //   };
    //   revenue({
    //     request_data: Base64.encode(JSON.stringify(parmes))
    //   }).then(res => {
    //     that.Histogram1 = res.data.data;
    //     that.Histogram2 = res.data.datas;
    //     that.Histogram3 = res.data.date;
    //     that.zmoneys = res.data.money;
    //     that.getEcharts1(res.data.data,res.data.datas,res.data.date);
    //   });
    // },
    // getcard(val){
    //   let that = this;
    //   let parmes = {
    //     store_id: val,
    //     start_time: that.form2.value1[0],
    //     end_time: that.form2.value1[1]
    //   };
    //   card({
    //     request_data: Base64.encode(JSON.stringify(parmes))
    //   }).then(res => {
    //     that.cardlist = res.data.card_type
    //     that.getpieEcharts(res.data.card_type);
    //   });
    // },
    getshopInfo(e) {
      this.storename = e.store_name
      this.store_id = e.id;
      this.getdata(e.id);
      this.getincome(e.id, this.timedata.start, this.timedata.end);
      // this.getbusiness(e);
      // this.getcardsell(e);
      // this.getrevenue(e)
      // this.getcard(e)
      // this.getEcharts(this.zhexiandata, this.zhexiandatax);
      // this.getEcharts1(this.Histogram1, this.Histogram2, this.Histogram3);
      // this.getpieEcharts(this.cardlist);
    },
    getdata(val) {
      if (this.form.value1 != "") {
        let parmes = {
          store_id: val,
          start_time: this.form.value1[0],
          end_time: this.form.value1[1],
        };
        overview({
          request_data: Base64.encode(JSON.stringify(parmes)),
        }).then((res) => {
          if (res.status == 2) {
            this.$message({
              message: res.message,
              type: "warning",
            });
            return;
          }
          // this.zhexiandata = res.result.one.data;
          // this.zhexiandatax = res.result.one.date;
          // this.zmoney = res.result.one.money;
          // this.carddata = res.result.two;
          // this.Histogram1 = res.result.three.data;
          // this.Histogram2 = res.result.three.datas;
          // this.Histogram3 = res.result.three.date;
          // this.zmoneys = res.result.three.money;
          this.carddata = res.result.two;
          this.getpieEcharts(res.result.four.list);
        });
      }
    },
    getEcharts(zhexiandata, zhexiandatax) {
      // console.log(zhexiandata, zhexiandatax)
      const myChart = echarts.init(document.getElementById("myChart"));
      // const colors = ["#91CC75","#5470C6"];
      const option = {
        // color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          data: zhexiandata,
        },
        // legend: {
        //   data: ["金额(元)", "数量(个)"],
        // },
        // yAxis: {
        //   name: "金额(元)",
        //   nameTextStyle: {
        //     padding: [0, 40, 0, 0]
        //   },
        //   type: "value"
        // },
        yAxis: {
          name: "日活跃数",
          position: "left",
          nameTextStyle: {
            padding: [0, 40, 0, 0],
          },
          axisLine: {
            show: true,
          },
          type: "value",
          alignTicks: true,
        },
        series: [
          {
            data: zhexiandatax,
            name: "日活跃数",
            type: "line",
            smooth: true,
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // grid: {
        //   x: 60,
        //   y: 60
        // }
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    getEcharts1(Histogram1, Histogram2, Histogram3, Histogram4) {
      const myCharts = echarts.init(document.getElementById("myCharts"));
      const colors = ["#91CC75", "#5470C6", "#EE6666"];
      const option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        calculable: true,
        legend: {
          data: ["订单数量", "上座率", "金额"],
          itemGap: 5,
        },
        // grid: {
        //   x: 60,
        //   y: 60
        // },
        xAxis: [
          {
            type: "category",
            data: Histogram4,
          },
        ],
        yAxis: [
          {
            name: "订单数量",
            position: "left",
            nameTextStyle: {
              padding: [0, 40, 0, 0],
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            type: "value",
            alignTicks: true,
          },
          {
            type: "value",
            name: "上座率",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: '{value} %'
            }
          },
          {
            type: "value",
            name: "金额",
            position: "right",
            alignTicks: true,
            offset: 50,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2],
              },
            },
          },
        ],
        dataZoom: [
          {
            show: false,
            start: 0,
            end: 100,
          },
          {
            type: "inside",
            start: 94,
            end: 100,
          },
          {
            show: false,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 30,
            height: "80%",
            showDataShadow: false,
            left: "100%",
          },
        ],
        series: [
          {
            name: "订单数量",
            type: "line",
            data: Histogram1,
            smooth: true
          },
          {
            name: "上座率",
            type: "bar",
            data: Histogram2,
            yAxisIndex: 1
          },
          {
            name: "金额",
            type: "bar",
            data: Histogram3,
            yAxisIndex: 2,
          },
        ]
      }
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
    getpieEcharts(cardlist) {
      const mypieCharts = echarts.init(document.getElementById("mypieCharts"));
      const option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "6%",
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "70%"],
            label: {
              show: false,
              position: "center",
            },
            data: cardlist,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      mypieCharts.setOption(option);
      window.addEventListener("resize", function () {
        mypieCharts.resize();
      });
    },
    // setfromdata() {
    //   this.getdata(0);
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //     } else {
    //       this.$message({
    //         type: "info",
    //         message: "请选择日期",
    //       });
    //     }
    //   });
    // },
    // setfrom1data(formName) {
    //   if (this.form1.value1 != "") {
    //     let parmes = {
    //       store_id: 0,
    //       start_time: this.form1.value1[0],
    //       end_time: this.form1.value1[1]
    //     };
    //     cardsell({
    //       request_data: Base64.encode(JSON.stringify(parmes))
    //     }).then(res => {
    //       this.carddata = res.data;
    //     });
    //   }
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {

    //     } else {
    //       this.$message({
    //         type: "info",
    //         message: "请选择日期"
    //       });
    //     }
    //   });
    // },
    // setfrom2data(formName){
    //   let that = this
    //   if (this.form2.value1 != "") {
    //     let parmes = {
    //       store_id: 0,
    //       start_time: that.form2.value1[0],
    //       end_time: that.form2.value1[1]
    //     };
    //     card({
    //     request_data: Base64.encode(JSON.stringify(parmes))
    //   }).then(res => {
    //     that.cardlist = res.data.card_type
    //     that.getpieEcharts(res.data.card_type);
    //   });
    //   }
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {

    //     } else {
    //       this.$message({
    //         type: "info",
    //         message: "请选择日期"
    //       });
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.value1 = "";
    },
    resetForms(formName) {
      this.$refs[formName].resetFields();
      this.form2.value1 = "";
    },
  },
  beforeCreate() {
    // 添加背景色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8FAFF");
  },
  beforeDestroy() {
    document.querySelector("body").setAttribute("style", "");
  },
};
</script>
<style scoped>
.big_cont {
  display: flex;
  align-items: flex-start;
}

.titbox {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.itemflex_b {
  display: flex;
  align-items: center;
}

.marbot {
  margin-bottom: 14px;
}

.marbot2 {
  margin-bottom: 20px;
}

.ib1 {
  margin-right: 10px;
}

.el-progress__text {
  display: none !important;
}
</style>
<style lang="scss" scoped>
.navbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  border-radius: 4px;
}

.navbox_tit {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 14px;
  border-radius: 4px;
}

.flexcontas {
  display: flex;
  align-items: center;
}

.echats_leftcont {
  width: 100%;
  background: #fff;
}

.echats_leftconts {
  width: 100%;
  background: #fff;
}

.toptext {
  color: #999999;
  font-size: 16px;
}

.lefttitbox {
  width: 100%;
  color: #131313;
  font-size: 14px;
  // border-bottom: 1px solid #f0f2f5;
  padding-bottom: 22px;
}

.lefttitboxs {
  width: 100%;
  color: #131313;
  font-size: 14px;
  // border-bottom: 1px solid #f0f2f5;
}

.el-table td:nth-of-type(1) {
  background: #F5F7FA !important;
  font-weight: 900;
}

.echats_rightcont {
  background: #fff;
  width: 49%;
}

.botnavbox {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

.cenbox {
  margin: 0 auto;
  width: 90%;
  border-bottom: 1px solid #e6ecf6;
  display: flex;
}

.text1 {
  color: #808080;
  font-size: 12px;
  margin-right: 14px;
}

.text2 {
  color: #808080;
  font-size: 12px;
}

.mainbox {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  border-radius: 4px;
}

.lineds {
  width: 1px;
  height: 74px;
  background: #f4f4f4;
}

.tit_zhecont {
  width: 100%;
  height: 166px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-bottom: 2px solid #f4f4f4;
}

.wi_box {
  width: 20%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wi_box:hover {
  background: #eaf5fd;
}

.lines {
  width: 1px;
  height: 74px;
  background: #f4f4f4;
}

.rightconts {
  width: 24%;
  margin-top: 30px;
  height: auto;
}

.floatrightbox {
  margin-bottom: 14px;
  padding: 10px 20px;
  background: #ffffff;
  border-radius: 4px;
}

.floatrightboxs {
  margin-bottom: 14px;
  background: #ffffff;
  border-radius: 4px;
}

.bianti {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.padding3 {
  padding: 10px 20px;
}

.flex_boxs {
  display: flex;
  flex-wrap: wrap;
}

.flexdi {
  text-align: center;
  width: 32%;
  margin-top: 30px;
  margin-bottom: 20px;
}

.divtext {
  color: #98a0af;
  font-size: 16px;
}

.imgbox {
  width: 100%;
  height: 248px;
}

.white-spacetext {
  white-space: nowrap; // 强制一行
  overflow: hidden;
  text-overflow: ellipsis;
  color: #a5a9af;
  font-size: 18px;
}

.link_text {
  display: flex;
  flex-wrap: wrap;
}

.itemlink {
  width: 40%;
  margin-bottom: 40px;
}
</style>
